<template>
  <div class="app-container">
    <el-form ref="form" :model="refueling" label-width="80px">
      <el-form-item label="车牌号码">
        <template>
          <el-select v-model="refueling.carId" disabled="true" clearable placeholder="请选择">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.carNo"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>


      <el-form-item label="加油站">
        <template>
          <el-select v-model="refueling.oilStationId" clearable placeholder="请选择">
            <el-option
              v-for="item in currentUnits"
              :key="item.id"
              :label="item.unitName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="加油时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" disabled="true"
                          v-model="refueling.oilDate"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>


      <el-form-item label="油料标号">
        <template>
          <el-select v-model="refueling.oilLabel" clearable placeholder="请选择">
            <el-option
              v-for="item in dictionaries"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="油料单价(每升)">
        <el-input v-model="refueling.unitPrice"></el-input>
      </el-form-item>

      <el-form-item label="本次加油(升)">
        <el-input v-model="refueling.thisGasVolume"></el-input>
      </el-form-item>

      <el-form-item label="加油总价">
        <el-input v-model="refueling.totalAmount=refueling.unitPrice*refueling.thisGasVolume"></el-input>
      </el-form-item>

      <el-form-item label="本次里程(公里)">
        <el-input v-model="refueling.thisMil"></el-input>
      </el-form-item>


      <el-form-item label="上次里程(公里)">
        <el-input v-model="refueling.lastMil"></el-input>
      </el-form-item>


      <el-form-item label="上次加油(升)">
        <el-input v-model="refueling.lastGasVolume"></el-input>
      </el-form-item>


      <el-form-item label="备注">
        <el-input v-model="refueling.remarks"></el-input>
      </el-form-item>


      <el-form-item label="加油人员">
        <template>
          <el-select v-model="refueling.operator" clearable placeholder="请选择">
            <el-option
              v-for="item in driverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="updateRefuel()"
        >保存记录
        </el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import RefuelApi from '@/api/refueling.js'
    export default {
        name: "refuelingedit",
        data() {
          return {
            carList: {},
            dictionaries: {},
            currentUnits: {},
            driverList: {},
            refueling: {
              carId: "",
              oilStationId: "",
              oilDate: "",
              oilLabel: "",
              unitPrice: "",
              totalAmount: "",
              thisMil: "",
              lastMil: "",
              thisGasVolume: "",
              lastGasVolume: "",
              operator: "",
              remarks: "",
          }
        }
    },
      created(){
          const id = this.$route.params.id;
          this.findRefuel(id)
          this.findAll()
        },
      methods: {
        findRefuel(id){
          RefuelApi.findRefuel(id).then(response=>{
            this.refueling=response.data.record
          })
        },
        updateRefuel(){
          RefuelApi.updateRefuel(this.refueling).then(response=>{
            this.$message({
              message: "修改成功",
              type: "success",
            })
            this.$router.push({path:"/daily_work/refuelinglist"})
          })
        },
        findAll(){
          RefuelApi.findAll().then(response=>{
            this.carList=response.data.carList
            this.dictionaries=response.data.dictionaries
            this.currentUnits=response.data.currentUnits
            this.driverList=response.data.driverList
          })
        }
      }
    }
</script>

<style scoped>

</style>
